<template>
  <div class="about">
    <ItemMusicTop :playlist="state.playlist"></ItemMusicTop>
    <ItemMusicList :itemlist="state.itemlist" :subscribedCount="state.playlist.subscribedCount" ></ItemMusicList>
  </div>
</template>
<script>
import { onMounted, reactive } from '@vue/runtime-core'
import { useRoute } from 'vue-router'
import {getItemMusicList} from '../request/api/item'
import ItemMusicTop from '../components/item/ItemMusicTop'
import ItemMusicList from '../components/item/ItemMusicList'
  export default{
    components:{ ItemMusicTop ,ItemMusicList},
    setup(){
      const state = reactive({
        playlist:{},//歌单详情的数据
        itemlist:[],//歌单的歌曲
      })
      onMounted( async ()=>{
        // console.log(useRoute());
        let id= useRoute().query.id
        // console.log(id);
        let res = await getItemMusicList(id)
        console.log(res);
         // 获取推荐歌单所有歌曲
        // let result = await getItemAllMusic({id,limit:10,offset:0})
        // console.log(result);

        state.playlist = res.data.playlist
        state.itemlist = res.data.playlist.tracks
        // console.log(state);
        // console.log(state.playlist);
        // 防止页面刷新，数据丢失，将数据保存到sessionStroage中
        sessionStorage.setItem('itemDetail',JSON.stringify(state))
      })
      return{state}
    }
  }
</script>
